<template>
  <div>
    <a-form>
      <h3 v-text="pageData.title"></h3>
      <a-form-item v-for="pageItem in pageData.items" 
        :key="pageItem.fieldId" 
        :label="pageItem.fieldName" 
        :labelCol="pageData.labelCol" 
        :wrapperCol="pageData.wrapperCol">
        <component :is="fieldTypeComponents[pageItem.fieldType]" 
          :fieldId="pageItem.fieldId"
          :fieldValue="pageItem.fieldValue" 
          :option="pageItem.objectField"></component>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import Text from './page/Text'
import Radio from './page/Radio'
import Checkbox from './page/Checkbox'
import Textarea from './page/Textarea'
import Integer from './page/Integer'
import RealNumber from './page/Number'
import Currency from './page/Currency'
import IDate from './page/Date'
import Telephone from './page/Telephone'
import Email from './page/Email'
import Url from './page/Url'
import File from './page/File'
import Picture from './page/Picture'
import Percent from './page/Percent'
import IBoolean from './page/Boolean'
const fieldTypeComponents = {
  text: Text,
  radio: Radio,
  checkbox: Checkbox,
  textarea: Textarea,
  integer: Integer,
  number: RealNumber,
  currency: Currency,
  date: IDate,
  telephone: Telephone,
  email: Email,
  url: Url,
  file: File,
  picture: Picture,
  percent: Percent,
  boolean: IBoolean,
}
export default {
  name: 'IPage',
  props: {
    pageData: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      fieldTypeComponents: fieldTypeComponents
    };
  },
  methods: {
    
  }
}
</script>

<style scoped>

</style>